<!-- 定制开发请联系客服微信：csmszf -->
<template>
	<view class="goshop-page">
		<view class='goshop-page-wraper'>
			<image class="goshop-head-img" src="/static/imgs/home/top-bg.png"></image>
			<view class='goshop-page-header'>
				<view class="goshop-head-wrap u-p-x-20">
						<view class="goshop-head-tabs">
							<view @click="topTabClick(index)" v-for="(item,index) in topTabList" :id="'item-id-'+index" :key="index"
								:class="['goshop-head-tabs-item',topCurrent==index?'active':'']">{{item.name}}
							</view>
						</view>
						<u-search :placeholder="searchKeyword" @focus="$Router.push({path: '/pages/common/search/search'})"  :showAction="false"></u-search>
				</view>
			</view>
			<view class='goshop-page-main'>
				<!-- 页面-->
				<swiper :style="{ height: swiperHeight + 'px'}" class="page-swiper" :disable-touch='canswiper' duration="200" :current='topCurrent' @change='changeCatepage' @transition='swiperTransition' @animationfinish='stopSwiper'>
				  <swiper-item v-for="(items,index) in topTabList" :key='index' :current-item-id='items.tid'>
					<view v-if='index===0'>
					   <attention ref='attention' :refresher='refresher' :fixedClass='fixedClass' @scrolltoTop='scrollToTop' @scrolltoview='scrollToView'
							 :index='index' @pushfixed='getFixed'  :topHeight='topHeight'>
					   </attention>
					</view>
					<view v-if='index===1'>
					  <recommend ref='recommend' v-if="index===topCurrent+1 || index===topCurrent-1 || index===topCurrent" :parentId='items.tid'
							 :index='index'  :topHeight='topHeight' :refresher='refresher' :loadFlag='index===topCurrent'>
					  </recommend>
					</view>
					<view v-if='index===2'>
					  <city ref='city' :index='index' v-if="index===topCurrent+1 || index===topCurrent-1 || index===topCurrent" :parentId='items.tid'
								:topHeight='topHeight' :refresher='refresher' :loadFlag='index===topCurrent'>
					  </city>
					</view>
				  </swiper-item>
				</swiper>
			</view>
		</view>
		
		<u-modal :confirmText="confirmText" :cancelText="cancelText" :show="showUpgrade" @confirm="upgradeConfirm"  ref="uModal" :title="upgradeTitle" :showCancelButton="showUpgradeButtom">
			<view class="slot-content">
				<rich-text :nodes="upgradeData.content"></rich-text>
			</view>
		</u-modal>
	
	</view>
</template>

<script>
	import attention from '@/pages/tabbar/home/swiper/attention';
	import city from '@/pages/tabbar/home/swiper/city.vue';
    import recommend from '@/pages/tabbar/home/swiper/recommend.vue';	
	import {isEmpty,isNotEmpty,getLocationInfo,upgrade} from '@/utils/utils';
	import {timLogin} from '@/utils/tim.js'
	import {deviceInit} from '@/common/http.api';
	import jwt from '@/utils/jwt.js'
	export default {
		components: {
			attention,
			city,
			recommend
		},
		data() {
			return {
				//顶部当前tab
				topCurrent:1,
				searchKeyword:'',
				//顶部tab选项卡
				topTabList: [],
				fixedClass: false,
                refresher:true,
				canswiper:false,
				topHeight: 0,
				//滑块的高度(单位px)
				swiperHeight: 0,
				isLogin: false,
				upgradeData:{},
				upgradeTitle:'新版本升级提示',
				showUpgradeButtom:false,
				showUpgrade:false,
				confirmText:'',
				cancelText:'',
			}
		},
		onPullDownRefresh(){

		},
		onReachBottom(){
			
		},
		onShow() {
			let that = this;
			that.isLogin = jwt.getLogin();
			this.getUpgrade();
			that.refresh();
			setTimeout(function(){
				that.setSwiperHeight();
			},50) 
			if(this.isLogin){
				timLogin();
			}
			uni.getSystemInfo({ 
			  success: (res) => {
				// 注意这里获得的高度宽度都是px，需要转换rpx
				console.log(res.screenHeight); // 屏幕高度，包含导航栏
				console.log(res.screenWidth); // 屏幕宽度
				console.log(res.windowHeight); // 可使用窗口高度，不包含导航栏
				console.log(res.windowWidth); // 可使用窗口宽度
				// 可使用窗口高度，将px转换rpx
				this.phoneHeight = (res.windowHeight * (750/res.windowWidth))
				console.log(this.phoneHeight)
			  }
			})
			// const query = uni.createSelectorQuery().in(that);
			// query.select('.goshop-page-header').boundingClientRect(data => {
			//   _this.topHeight = data.height
			//   _this.orderHeight = _this.windowHeight - _this.topHeight - 5
			// }).exec();
			if(this.topCurrent===1){
				this.$nextTick(()=>{
						console.log("ref",this.$refs.recommend)
						this.$refs.recommend[0].onRefresh()
						this.$refs.recommend[0].cleanFlag = true;
				})	
			}else if(this.topCurrent===2){
				this.$nextTick(()=>{
						console.log("ref",this.$refs.attention)
						this.$refs.attention[0].onRefresh()
				})	
				
			}else if(this.topCurrent===3){
				this.$nextTick(()=>{
						console.log("ref",this.$refs.city)
						this.$refs.city[0].onRefresh()
				})	
				
			}
		},
		onLoad() {
			 // 刚进入页面的时候就加载这个动画
			 //uni.startPullDownRefresh();
			 //动态设置swiper的高度
			 // this.$nextTick(() => {
			 //   this.setSwiperHeight();
			 // });
			//首次标志
			uni.getLocation({
				type: 'gcj02',
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
				},
				fail(err) {
					console.log('错误');
					console.log(err);
				},
				complete() {
					console.log('完毕')
				}
			});
			const firstFalg = uni.getStorageSync('first_flag');
			uni.getSystemInfo({
				success: function (res) {
					console.log('设备信息：' + res)
					deviceInit(res).then(res => {
					if (res.code === 0) {
						console.info('初始化设备成功：' + res)
					} else {
						console.error('初始化设备失败：' + res)
					}
				});
				}
			});
			if(isEmpty(firstFalg) && !firstFalg){
				this.getArea();
				uni.setStorageSync('first_flag', true);
			}
		},
		methods: {
			upgradeConfirm(){
				uni.navigateTo({
					url: '/pages/common/public/webView?url=' + this.upgradeData.url
				})
			},
			getUpgrade(){
				// #ifdef APP-PLUS
				// 获取本地应用资源版本号
				plus.runtime.getProperty(plus.runtime.appid, (info) => {
					//console.log(JSON.stringify(info));
					debugger
					// this.version = info.version;
					// this.versionCode = info.versionCode ;
					upgrade({params:{version:info.version}}).then(res => {
							if (res.code === 0) {
								this.upgradeData = res.data;
								this.showUpgrade = true;
							}
							uni.hideLoading();
						});
				})
				// #endif
			},
			async getArea() {
			    let address = await getLocationInfo()
				console.info('地址：' + address)
			},
			refresh(){
				this.searchKeyword = this.$t('home.search.keyword');
				this.confirmText = this.$t('common.sure.text');
				this.cancelText = this.$t('common.cancel.text');
				this.topTabList=[{
					name: this.$t('home.attention'),
					tid:0,
				}, {
					name: this.$t('home.recommend'),
					tid:1,
				}, {
					name: this.$t('home.samecity'),
					tid:2
				}];
			},
			onPulling(e) { //自定义下拉刷新控件被下拉
				console.log("onpulling", e);
			},
			// 自定义下拉刷新被复位
			onRestore() {
			  console.error("onRestore");
			},
			// 自定义下拉刷新被中止
			onAbort() {
			  console.error("onAbort");
			},
            onRefresh() {  //自定义下拉刷新被触发
				console.log("onRefresh");
            },
			onButtomRefresh() { //底部刷新
				 console.log("onButtomRefresh");
			},
			topTabClick(e) {
				this.topCurrent = e;
			},
			swiperTransition(){
			  this.refresher = false
			},
			stopSwiper(){
			  this.refresher = true
			},
			changeCatepage(e) {
			  // 滑动切换
			  this.topCurrent = e.detail.current
			},
			getFixed(e) {
			  this.fixedHeight = e
			},
			scrollToView() {
			  this.scrollindex = this.scrollTop
			  this.$nextTick(() => {
			    this.scrollindex = this.fixedHeight - (this.topHeight)
			  });
			},
			scrollToTop() {
			  this.scrollindex = 0
			},
			 //动态设置swiper的高度
			setSwiperHeight() {
			 //  let element = "#content-wrap" + this.topCurrent;
			 //  debugger
			 //  let query = uni.createSelectorQuery().in(this);
			 //  query.select(element).boundingClientRect();
			 //  query.exec((res) => {
				// debugger
				// if (res && res[0]) {
				//   this.swiperHeight = res[0].height;
				// }
			 //  });
			  let element = ".goshop-page-main";
			  let query = uni.createSelectorQuery().in(this);
			  query.select(element).boundingClientRect();
			  query.exec((res) => {
					if (res && res[0]) {
					  this.swiperHeight = res[0].height;
					}
			  });
			},
		}
	}
</script>

<style lang="scss">
page{
	//height: 100vh;
	height: 100%;
}

/deep/.uni-scroll-view-refresher{
	background-color:transparent !important;
}
.goshop-head-img{
	position: fixed;
	width: 100%;
	height: 300rpx; 
	top: 0;
	left: 0;
}
.goshop-head-wrap{
	height: 190rpx;
	
	// 后面加的
	//position: fixed;
	//top: 0;
	//right: 0;
	//left: 0;
	//width: 100%;
	//background-color: $goshop-color-primary;
	.goshop-head-tabs{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		.goshop-head-tabs-item {
				display: inline-block;
				//width: 15%;
				margin-right: 20rpx;
				text-align: center;
				line-height: 80rpx;
				color: $goshop-color-auxiliary-one;
				&.active {
					color: $goshop-color-auxiliary-four;
					font-weight: bold;
				}
			}
	}
}

.goshop-page {
	width: 100%;
	height: 100%;
}
.goshop-page-wraper {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.goshop-page-header {
	//background: rgb(8, 117, 94);
	color: #fff;
	//line-height: 100rpx;
	flex: 0 0 100rpx;
	/* 不放大不缩小固定100rpx */
    height: 190rpx;
	// background-image: url(../../../static/imgs/home/top-bg.png);
	// background-size: 100% 100%;
	// background-position: 50% 50%;
	// background-repeat: no-repeat;
	z-index: 100;
}

.goshop-page-main {
	height: 100%;
	position: relative;
	padding-bottom: calc(var(--window-bottom) + 30px);
	//后面加的
	//margin-top: 80rpx;
}
</style>
